.float-pop {
  width: 180px;
  position: absolute;
  top: 355px;
  right: 0;
  border-top: none;
  z-index: 10000;
  transition: .3s width;
  overflow: hidden;
}

.float-pop .pop-title {
  width: 100%;
  height: 32px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #DA363B;
}

.float-pop .pop-title h4 {
  padding-left: 12px;
  color: #FFFFFF;
}

.float-pop .pop-btn {
  margin-right: 3px;
}

.float-pop .pop-btn .stretch {
  width: 16px;
  height: 16px;
  cursor: pointer;
}

.float-pop .pop-btn .close {
  width: 14px;
  height: 14px;
  cursor: pointer;
  margin-left: 8px;
}

.float-pop .pop-content .pop-item {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  background-color: #FFF;
  border-top: 1px solid #dedede;
  padding: 5px;
}

.float-pop .pop-content .pop-item * {
  margin-bottom: 5px;
}

.float-pop .pop-content .pop-item :last-child {
  margin-bottom: 0;
}

.float-pop .pop-content .pop-item p, .float-pop .pop-content .pop-item h4 {
  color: #AC001C;
  font-weight: bold;
  line-height: 20px;
}

.float-pop .pop-content .pop-item img {
  width: 150px;
  height: 150px;
}

.float-pop .pop-content .info p {
  color: #333333;
  font-weight: normal;
  word-break: break-all;
  padding: 5px 10px;
}

.float-pop.narrow {
  width: 24px;
  right: 0;
  border-radius: 5px 0 0 5px;
  cursor: pointer;
  transition: .3s width;
}

.float-pop.narrow .pop-title {
  position: relative;
  height: 120px;
}

.float-pop.narrow .pop-title h4 {
  padding: 20px 5px 5px 5px;
}

.float-pop.narrow .pop-btn {
  position: absolute;
  top: 7px;
  right: 2px;
  margin-right: 0;
}

.float-pop .flex {
    display: flex;
    justify-content: center;
    align-items: center;
}

.float-pop .flex-column {
    display: flex;
    flex-direction: column;
}

@media (max-width: 550px) {
	.float-pop {
		top: 55px;
	}
}